﻿@{
    ViewData["Title"] = "Count";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js"></script>

<label style="font-size:50px">门店总营业额：<span id="totalPrice"></span></label>
<div id="main" style="width: 600px; height: 400px;"></div>
<div id="main2" style="width: 600px; height: 400px;"></div>

@* 显示 *@
<table class="layui-table" id="demoTable" lay-filter="demoTable">
    <tbody>
    </tbody>
</table>

<script> 
    layui.use(['table', 'form', 'layer', 'laypage', 'jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;
        var laypage = layui.laypage;

        //获取显示值
        $.get({
            url: 'http://localhost:5174/api/RoomHousingState/GetAllStores',
            headers: {
                "Authorization": "Bearer " + localStorage.getItem('token')
            },
            async: true,
            success: function (res) {
                console.log(res)
                // 提取价格和门店名称
                const storeNames = res.map(c => c.storesName);
                const prices = res.map(c => c.stroePrice);
                // 计算价格总和
                const totalPrice = prices.reduce((sum, price) => sum + price, 0);
                $("#totalPrice").text(totalPrice);
                var myChart = echarts.init(document.getElementById('main'));

                var option1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: storeNames, // 你的x轴数据
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            label: {
                                show: true,
                                position: 'top'
                            },
                            name: 'Direct',
                            type: 'bar',
                            barWidth: '60%',
                            data: prices // 你的y轴数据
                        }
                    ]
                };

                myChart.setOption(option1);

                var myChart2 = echarts.init(document.getElementById('main2'));
                // 折线图
                var  option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: storeNames
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            label: {
                                show: true,
                                position: 'top'
                            },
                            data: prices,
                            type: 'line',
                            smooth: true
                        }
                    ]
                }

                myChart2.setOption(option2);

            },
            error: function (error) {
                console.error(error);
            }
        })
    });
</script>